<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
          <div>
            <span>库存盘点详情</span>
          </div>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column label="耗材编号" align="center" prop="materialNo" :show-overflow-tooltip="true"/>
              <el-table-column label="耗材名称" align="center" prop="materialName" :show-overflow-tooltip="true"/>
              <el-table-column label="批号" align="center" prop="batchNo" :show-overflow-tooltip="true"/>
              <el-table-column label="浓度" align="center" prop="concentration"/>
              <el-table-column label="库存数量" align="center" prop="surplus"/>
              <el-table-column label="实际库存数量" align="center" prop="count"/>
              <el-table-column label="盈亏" align="center" prop="profitLosss"/>
              <el-table-column label="盈亏原因" align="center" prop="reson"/>
              <el-table-column label="所属科室" align="center" prop="deptName"/>
            </el-table>
          </el-card>
<!--          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"/>-->
          <div class="pagination-container">
            <el-pagination v-show="total>0"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total, sizes,prev, pager, next,jumper"
                           :current-page.sync="pageNum"
                           :page-size="pageSize"
                           :page-sizes="[5,10,20,30,50]"
                           :total="total">
            </el-pagination>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import { queryMaterialInventoryDetailList } from '../../../../api/business/materialInventory'

export default {
  name: "detail",
  data() {
    return {
      checkList: [],
      loading: false,
      activeName: '1',
      deviceInfo: {},
      type: [],
      value: '',
      total: 5,
      pageNum: 1,
      pageSize: 20,
      id:null
    };
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    checkId: {
      type: String,
      default: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    console.log(this.id)
    if (this.id) {
      this.getCheckList()
    }
  },
  methods: {
    getCheckList(){
      let form={
        id:this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.loading = true;
      console.log(form)
      queryMaterialInventoryDetailList(form).then(response =>{
        console.log(response)
        this.loading = false;
        this.checkList=response.rows;
        this.total=response.total;
      })
    },
    handleOpen() {
    },
    handleClose() {
      this.$emit('close', false)
    },
    handleCurrentChange(val){

      this.pageNum = val;
      this.getCheckList();
    },
    handleSizeChange(val){
      this.pageNum = 1;
      this.pageSize = val;
      this.getCheckList();
    }
  }
};
</script>
